<<!include:header>>
    <section class="hero-section litte-header">
        <div class="container">
            <div class="filtrate mb40 ft15    ">
                <div class="filtrate mb40 ft15   " style="margin-top:150px;color:#fff">

                </div>
            </div>
        </div>

    </section><!-- End Hero -->
    <main id="main" onresize="setSize()">
        <div class="container" style="margin-top: 10px;" id="mainPanel">

            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-3">
                    <div class="row" style="margin-left: -50px;">
                        <div class="col-xs-12 col-md-12 col-lg-12">
                            <div class="btn-group center-block" style="width: 100%;  ">


                                <div class="btn-group" style="width:100%;">
                                    <ul class="dropdown-menu" id="bookList"
                                        style="transform: translate3d(2px, 79px, 0px)">

                                    </ul>
                                    <button type="button" class="btn btn-warning" id="currentBookMenu"></button>
                                    <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">
                                        <span class="caret"></span>
                                    </button>

                                </div>

                            </div>
                        </div>

                        <div class="col-xs-12 col-md-12 col-lg-12" id="bookMenuTreeWrap">
                            <div style="width: 100%; height: 100%; " id="bookMenuTree"></div>
                        </div>

                    </div>


                </div>
                <div class="col-xs-12 col-sm-12 col-md-8 col-lg-9">
                    <div class="row" style="height: 50px;">
                        <div class="col-12 text-right"
                            style="background-color: #17a2b8;color: beige; line-height: 50px; vertical-align: middle;"
                            id="courseInfo"> </div>
                    </div>
                    <div class="row">
                        <div style="width: 100%; ">
                            <video id="my-video" width="100%" height="100%" mute controls object-fit preload="meta"
                                class>
                                <source :src="videoUrl" type="application/x-mpegURL" />
                                <source :src="videoUrl" type="video/mp4" />
                                <source :src="videoUrl" type="video/ogg" />
                            </video>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 0px;background-color: #17a2b8;">
                        <div class="btn-group btn-group" style="width: 100%;" role="toolbar">
                            <div class="btn btn-info col-3" onclick="switchAttachDiv('zlxz')">资料下载</div>
                            <div class="btn btn-info col-3" onclick="switchAttachDiv('stlx')">随堂练习</div>
                            <div class="btn btn-info col-3" onclick="switchAttachDiv('wtjd')">问题解答</div>
                            <div class="btn btn-info col-3"></div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 30px;">
                        <div id="zlxz" style="display: block;width: 500px;">
                            <div class="list-group" id="zlxzDiv">
                                <!-- <a href="#" class="list-group-item">Dapibus ac facilisis in</a> -->
                            </div>
                        </div>
                        <div id="stlx" style="display: none;width: 2500px;">随堂练习</div>
                        <div id="wtjd" style="display: none;">问题解答</div>
                    </div>

                </div>


            </div>
    </main>
    <script>
        var bookList;
        var currentBook;
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == "id") {
                id = pair[1];
                break;
            }
        }

        function setSize() {
            if (screen.width < 768) {
                document.getElementById("mainPanel").setAttribute("style", "margin-top:10px;max-width:" + screen.width + "px");
                document.getElementById("bookMenuTreeWrap").setAttribute("style", "margin-top: 20px; margin-left: -30px;overflow:auto; height:350px");

            } else if (screen.width < 992) {
                document.getElementById("mainPanel").setAttribute("style", "margin-top:10px;max-width:" + screen.width * 0.9 + "px");
                document.getElementById("bookMenuTreeWrap").setAttribute("style", "margin-top: 20px; margin-left: -30px;overflow:auto; height:450px");
            } else if (screen.width < 1200) {
                document.getElementById("mainPanel").setAttribute("style", "margin-top:10px;max-width:" + screen.width * 0.8 + "px");
                document.getElementById("bookMenuTreeWrap").setAttribute("style", "margin-top: 20px; margin-left: -30px;overflow:auto; height:550px");
            } else {
                document.getElementById("mainPanel").setAttribute("style", "margin-top:10px;max-width:" + screen.width * 0.7 + "px");
                document.getElementById("bookMenuTreeWrap").setAttribute("style", "margin-top: 20px; margin-left: -30px;overflow:auto; height:600px");
            }
        }
        setSize();



        axios.get('/api/course/getPlayPageData/' + id)
            .then(function (response) {
                var res = response.data;
                if (res.code != 200) {

                    alert(res.title)
                    return;
                }
                bookList = res.data;
                document.getElementById("courseInfo").innerHTML = "当前学习课程:[" + res.title + "]";

                var bookMenuStr = "";
                if (bookList) {

                    for (var i = 0; i < bookList.length; i++) {
                        var item = bookList[i];
                        if (i == 0) {
                            document.getElementById("currentBookMenu").innerHTML = item.Label + ' <span class="caret"></span>';
                            changeBook(item.Id);

                        }
                        bookMenuStr += ("  <li onclick='changeBook(" + item.Id + ")' style='cursor:pointer;margin:20px;'>" + (i + 1) + "." + item.Label + "</li>")
                    }
                }
                document.getElementById("bookList").innerHTML = bookMenuStr;
            })

        function changeBook(bookid) {
            document.getElementById("bookMenuTree").innerHTML = "没有章节";
            findFirstTopicPlay = false;// 找到第一个进行播放
            for (var i = 0; i < bookList.length; i++) {

                if (bookList[i].Id == bookid) {
                    currentBook = bookList[i]
                    document.getElementById("currentBookMenu").innerHTML = currentBook.Label + ' <span class="caret"></span>';
                    var zhangStr = "";
                    for (var zhangIndex = 0; zhangIndex < currentBook.Content.length; zhangIndex++) { //
                        var zhangItem = currentBook.Content[zhangIndex];
                        zhangStr += `<ul style=" margin-left:20px;"><a href="javascript:onclick=show('` + zhangItem.Id + `') ">` + zhangItem.SN + "." + zhangItem.Label + `</a></ul>`;
                        if (zhangIndex == 0) {
                            zhangStr += `  <ul id="` + zhangItem.Id + `" class="" style="display: block;"> `
                        } else {
                            zhangStr += `  <ul id="` + zhangItem.Id + `" class="" style="display: none;"> `
                        }

                        var jieStr = "";
                        for (var JieIndex = 0; JieIndex < zhangItem.Children.length; JieIndex++) {
                            var jieItem = zhangItem.Children[JieIndex];
                            jieStr += `<ul style=" margin-left:10px;margin-top:10px; "><a href="javascript:onclick=show('` + jieItem.Id + `') ">` + jieItem.SN + "." + jieItem.Label + `</a></ul>`;
                            if (JieIndex == 0) {
                                jieStr += `  <ul id="` + jieItem.Id + `" class="" style="display: block;">`
                            } else {
                                jieStr += `  <ul id="` + jieItem.Id + `" class="" style="display: none;">`
                            }



                            var topicStr = "";
                            for (var topicIndex = 0; topicIndex < jieItem.Children.length; topicIndex++) {
                                var topicItem = jieItem.Children[topicIndex];
                                topicStr += `  <li style="margin-top:10px; margin-left:30px;display: block;cursor:pointer" id="` + topicItem.Id + `" onclick="playVideo('` + topicItem.Id + `')"  > ` + topicItem.SN + "." + topicItem.Label + `</li> `
                                if (findFirstTopicPlay == false) {
                                    playVideo(topicItem.Id)
                                    findFirstTopicPlay = true;
                                }
                            }
                            jieStr += topicStr;
                            jieStr += `  </ul>`;

                        }
                        zhangStr += jieStr
                        zhangStr += `</ul>`;
                    }
                    document.getElementById("bookMenuTree").innerHTML = zhangStr;


                    break;
                }
            }




        }
        function show(d1) {
            if (document.getElementById(d1).style.display == 'block') {
                document.getElementById(d1).style.display = 'none';  //触动的层如果处于显示状态，即隐藏
            }
            else {
                document.getElementById(d1).style.display = 'block';  //触动的层如果处于隐藏状态，即显示
            }
        }
        function switchAttachDiv(divName) {
            document.getElementById("zlxz").style.display = 'none';
            document.getElementById("stlx").style.display = 'none';
            document.getElementById("wtjd").style.display = 'none';


            document.getElementById(divName).style.display = 'block';
        }
        var thisTopicQuestions = [];
        // 获取随堂练习的作业
        function getStlxData(questions) {
            if (questions.length == 0) {
                document.getElementById("stlx").innerHTML = "没有数据";
                return
            }
            axios.post('/api/exercise/getQuestions', questions, {
                headers: {
                    'token': sessionStorage.getItem("token")
                }
            }).then(function (response) {
                var res = response.data;
                if (res.code != 200) {

                    alert(res.title)
                    return;
                }
                if (!res.data) {
                    document.getElementById("stlx").innerHTML = "没有数据";

                    return
                }
                var resultHtml = ``;
                thisTopicQuestions = res.data;
                for (var i = 0; i < res.data.length; i++) {
                    var item = res.data[i];
                    var actionUI = "";
                    var actionLabel = "【单选题】";
                    switch (item.QuestionType) {
                        case 1:
                            actionUI = "  type='radio'"
                            actionLabel = "【单选题】";
                            break;
                        case 2:
                            actionUI = "  type='checkbox'"
                            actionLabel = "【多选题】";
                            break;
                        case 3:
                            actionUI = "  type='radio'"
                            actionLabel = "【判断题】";
                            break;

                        default:
                            break;
                    }
                    var xuanxiang = "";

                    if (item.A != "") {
                        xuanxiang += `    <div class="row  "    style="color:slategrey;font-size: 14px; margin:20px;"> <input onchange="onQuestionChange(this,` + item.QuestionType + `,` + item.Id + `,this.value )"  style='margin-top:4px;margin-right:10px;' ` + actionUI + ` name="question_` + item.Id + `" value='A'  /> A:` + item.A + `  </div>`;
                    }
                    if (item.B != "") {
                        xuanxiang += `    <div class="row  "    style="color:slategrey;font-size: 14px; margin:20px;"> <input onchange="onQuestionChange(this,` + item.QuestionType + `,` + item.Id + `,this.value )"  style='margin-top:4px;margin-right:10px;' ` + actionUI + `name="question_` + item.Id + `"value='B'  />B:` + item.B + `  </div>`;
                    }
                    if (item.C != "") {
                        xuanxiang += `    <div class="row  "    style="color:slategrey;font-size: 14px;  margin:20px;"> <input onchange="onQuestionChange(this,` + item.QuestionType + `,` + item.Id + `,this.value )"  style='margin-top:4px;margin-right:10px;' ` + actionUI + `name="question_` + item.Id + `"value='C'  />C:` + item.C + `  </div>`;
                    }
                    if (item.D != "") {
                        xuanxiang += `    <div class="row  "    style="color:slategrey;font-size: 14px;  margin:20px;"> <input onchange="onQuestionChange(this,` + item.QuestionType + `,` + item.Id + `,this.value )"  style='margin-top:4px;margin-right:10px;' ` + actionUI + `name="question_` + item.Id + `"value='D'  /> D:` + item.D + `  </div>`;
                    }
                    if (item.E != "") {
                        xuanxiang += `    <div class="row  "    style="color:slategrey;font-size: 14px; margin:20px;"> <input onchange="onQuestionChange(this,` + item.QuestionType + `,` + item.Id + `,this.value )"  style='margin-top:4px;margin-right:10px;' ` + actionUI + `name="question_` + item.Id + `"value='E'  />E:` + item.E + `  </div>`;
                    }
                    if (item.F != "") {
                        xuanxiang += `    <div class="row  "    style="color:slategrey;font-size: 14px;  margin:20px;"> <input onchange="onQuestionChange(this,` + item.QuestionType + `,` + item.Id + `,this.value )"  style='margin-top:4px;margin-right:10px;' ` + actionUI + `name="question_` + item.Id + `"value='F'  /> F:` + item.F + `  </div>`;
                    }
                    if (item.G != "") {
                        xuanxiang += `    <div class="row  "    style="color:slategrey;font-size: 14px;  margin:20px;"> <input onchange="onQuestionChange(this,` + item.QuestionType + `,` + item.Id + `,this.value )"  style='margin-top:4px;margin-right:10px;' ` + actionUI + `name="question_` + item.Id + `"value='G'  /> G:` + item.G + `  </div>`;
                    }
                    if (item.H != "") {
                        xuanxiang += `    <div class="row  "    style="color:slategrey;font-size: 14px; margin:20px;"> <input onchange="onQuestionChange(this,` + item.QuestionType + `,` + item.Id + `,this.value )"  style='margin-top:4px;margin-right:10px;' ` + actionUI + `name="question_` + item.Id + `"value='H'  />H:` + item.H + `  </div>`;
                    }
                    if (item.I != "") {
                        xuanxiang += `    <div class="row  "    style="color:slategrey;font-size: 14px;  margin:20px;"> <input onchange="onQuestionChange(this,` + item.QuestionType + `,` + item.Id + `,this.value )"  style='margin-top:4px;margin-right:10px;' ` + actionUI + `name="question_` + item.Id + `"value='I'  /> I:` + item.I + `  </div>`;
                    }
                    if (item.J != "") {
                        xuanxiang += `    <div class="row  "    style="color:slategrey;font-size: 14px;  margin:20px;"> <input onchange="onQuestionChange(this,` + item.QuestionType + `,` + item.Id + `,this.value )"  style='margin-top:4px;margin-right:10px;' ` + actionUI + `name="question_` + item.Id + `"value='J'  />J:` + item.J + `  </div>`;
                    } if (item.K != "") {
                        xuanxiang += `    <div class="row  "    style="color:slategrey;font-size: 14px; margin:20px;"> <input onchange="onQuestionChange(this,` + item.QuestionType + `,` + item.Id + `,this.value )"  style='margin-top:4px;margin-right:10px;' ` + actionUI + `name="question_` + item.Id + `"value='K'  />K:` + item.K + `  </div>`;
                    }

                    resultHtml += ` <div class="row  d-none d-md-flex d-lg-flex" style="padding:20px;margin-top: 10px;width: 100%;"
                          >
                            

                                <div class="col-12">
                                    <div class="row  " style="color: #b7a202; font-size: 18px; background-color:#f1f1f1;padding:10px;">
                                        <label style=" color: cadetblue; ">`+ actionLabel + `</label>  <label >` + item.QuestionContent + `</label>
                                    </div>
                                  
                                     `+ xuanxiang + ` 
                                     <div class="row  "  style="margin-left:20px" >
                                        <button class="  btn-primary" type="button"  onclick="submitThisQuestion(`+ item.Id + `)" > 确定 </button>
                                        <div   name="question`+ item.Id + `" style="color: darkcyan;font-size: 14px;margin-left:20px ">  </div>
                                    </div>
                                  
                                </div>
                               
                   

                        </div>
                        <div class=" d-md-none d-lg-none d-sm-flex d-xs-flex " style="padding: 20px; margin-top:10px;background-color:#f1f1f1">
                            <div class="row  " style="color: #b7a202; font-size: 18px; background-color:#f1f1f1;padding:10px;">
                                        <label style=" color: cadetblue; ">`+ actionLabel + item.QuestionScore + `分】</label>  <label >` + item.QuestionContent + `</label>
                                    </div> 
                                `+ xuanxiang + `  
                                <div class="row  "  style="margin:10px" >
                                <button class="  btn-primary" type="button"  onclick="submitThisQuestion(`+ item.Id + `)" > 确定 </button>
                            </div>
                                <div class="row  "  style="margin:10px" >
                                       
                                        <div   name="question`+ item.Id + `" style="color: darkcyan;font-size: 14px;margin-left:20px ">  </div>
                                    </div>

                        </div>`;
                }
                resultHtml += `   <div class="row  text-center"     >    </div> `;
                document.getElementById("stlx").innerHTML = resultHtml;
            });
        }
        var exerciseAnswerObj = {};

        function onQuestionChange(inputUI, questionKind, questionID, value) {
            if (questionKind == 2) {
                //多项选择
                if (inputUI.checked == false && exerciseAnswerObj[questionID]) {
                    var otherValues = [];
                    for (var i = 0; i < exerciseAnswerObj[questionID].length; i++) {
                        if (exerciseAnswerObj[questionID][i] != value) {
                            otherValues.push(exerciseAnswerObj[questionID][i])
                        }
                    }
                    if (otherValues.length == 0) {
                        delete exerciseAnswerObj[questionID];
                    } else {
                        exerciseAnswerObj[questionID] = otherValues;
                    }


                } else {
                    if (exerciseAnswerObj[questionID]) {
                        exerciseAnswerObj[questionID].push(value)
                    } else {
                        exerciseAnswerObj[questionID] = [value];
                    }
                }
            } else {

                exerciseAnswerObj[questionID] = [value];
            }

        }
        function submitThisQuestion(questionID) {
            var isRight = false;
            var currentQuestion;
            for (var i = 0; i < thisTopicQuestions.length; i++) {
                var question = thisTopicQuestions[i];
                if (question.Id == questionID) {
                    currentQuestion = question;
                    break;
                }

            }
            if (currentQuestion.QuestionType == 2) {

                if (exerciseAnswerObj[questionID]) {
                    if (exerciseAnswerObj[questionID].join("").length != currentQuestion.QuestionAnswer.length) {
                        isRight = false;
                    } else {

                        for (var i = 0; i < exerciseAnswerObj[questionID].length; i++) {
                            if (currentQuestion.QuestionAnswer.indexOf(exerciseAnswerObj[questionID][i]) < 0) {

                                isRight = false;
                                break;
                            } else {
                                isRight = true;
                            }
                        }
                    }
                }



            } else {
                if (currentQuestion.QuestionAnswer == exerciseAnswerObj[questionID]) {
                    isRight = true;
                }
            }
            var questionAnalyseNames = document.getElementsByName("question" + questionID);
            for (var i = 0; i < questionAnalyseNames.length; i++) {
                if (isRight) {
                    questionAnalyseNames[i].innerHTML = "<label style='color:#33ff33;margin-right:20px'>正确 </label> 解析：" + currentQuestion.QuestionAnalyse;
                } else {
                    questionAnalyseNames[i].innerHTML = "<label style='color:#ff3333;margin-right:20px'>错误.正确答案：" + currentQuestion.QuestionAnswer + "  </label>解析：" + currentQuestion.QuestionAnalyse;
                }
            }
        }
        function findTopic(topicID) {
            var result = {};
            for (var zhangIndex = 0; zhangIndex < currentBook.Content.length; zhangIndex++) { //
                var zhangItem = currentBook.Content[zhangIndex];

                for (var jieIndex = 0; jieIndex < zhangItem.Children.length; jieIndex++) { //
                    var jieItem = zhangItem.Children[jieIndex];
                    for (var topicIndex = 0; topicIndex < jieItem.Children.length; topicIndex++) { // 
                        if (jieItem.Children[topicIndex].Id == topicID) {
                            result.zhang = zhangItem;
                            result.jie = jieItem;
                            result.topic = jieItem.Children[topicIndex];

                            return result;
                        }

                    }
                }
            }

        }


        function playVideo(topicID) {
            targetHome = findTopic(topicID)
            setDownLoadDoc(targetHome)
            getStlxData(targetHome.topic.Questions)

            if (!targetHome.topic.Video || targetHome.topic.Video.length < 1) {
                alert("这个知识点没有视频,或者您还没有购买")
                return;
            }
            var video = document.getElementById("my-video");
            var urls = targetHome.topic.Video.split(".");
            var ext = urls[urls.length - 1].toLowerCase();
            if (ext == "mp4") {
                video.src = targetHome.topic.Video;
                video.addEventListener("loadedmetadata", function () {
                    video.play();
                });
            } else {
                if (Hls.isSupported()) {
                    var hls = new Hls();
                    hls.loadSource(targetHome.topic.Video);
                    hls.attachMedia(video);
                    hls.on(Hls.Events.MANIFEST_PARSED, function () {
                        video.play();
                    });
                } else if (video.canPlayType("application/vnd.apple.mpegurl"))
                    video.src = targetHome.topic.Video;
                video.addEventListener("loadedmetadata", function () {
                    video.play();
                });
            }
        }
        //解析出 本教材.本章.本节.本知识点的相关资料
        function setDownLoadDoc(targetHome) {
            var resultDocsStr = "";
            if (currentBook.Info == "") {
                currentBook.Info = "{}"
            }
            bookDocs = JSON.parse(currentBook.Info)
            for (var i = 0; i < bookDocs.length; i++) {
                resultDocsStr += `   <a href="` + bookDocs[i].href + `"   download="` + bookDocs[i].title + `" class="list-group-item">` + bookDocs[i].title + "(" + bookDocs[i].label + `)</a> `;
            }

            for (var i = 0; i < targetHome.zhang.length; i++) {

                resultDocsStr += `   <a href="` + targetHome.zhang[i].Doc + `"  download="` + targetHome.zhang[i].Doc + `"  class="list-group-item">本章所含资料</a> `;

            }

            for (var i = 0; i < targetHome.jie.length; i++) {
                resultDocsStr += `   <a href="` + targetHome.jie[i].Doc + `"  download="` + targetHome.jie[i].Doc + `"  class="list-group-item">本节所含资料</a> `;
            }

            for (var i = 0; i < targetHome.topic.length; i++) {
                resultDocsStr += `   <a href="` + targetHome.topic[i].Doc + `"  download="` + targetHome.topic[i].Doc + `"  class="list-group-item">本课所含资料</a> `;
            }

            document.getElementById("zlxzDiv").innerHTML = resultDocsStr;
        }
    </script>
    <<!include:footer>>